iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0

本篇重點

MVC - View
viewdata & viewbag & viewModel
view component *
Action Reuslt & view engine *


前言

今天的重點是MVC的View部分
會先討論基本View的內容
後面再整理一下生命週期裡到View的流程


View

View into

前面幾篇有提到View就是前端的頁面顯示
通常不會有複雜的邏輯
從controller傳出去的物件直接顯示出來就好
在ASP .NET Core裡所使用得是Razor語法,View資料夾下面的的都是.cshtml的檔案,透過 .NET 編譯過後會轉成瀏覽器可以看得懂的HTML

實際執行專案會依照controller的名稱去抓取對應的View下面的.cshtml

HomeController.cs

實際在執行時
會先去找Views下面對應的資料夾,找到和action相同的.cshtml
Shared資料夾下是放共用的view,或是partial view

如果找不到對應資料夾下的程式
則會往Shared下去找

.cshtml

剛剛有提到view 是由.cshtml所組成的
會經由編譯後轉成HTML
在View裡面是可以寫C#程式的
只要將


ViewData & ViewBag & viewModel

ViewData & ViewBag

view 除了透過action傳入一個物件當作model使用
也可以透過Viewdata和viewbag的以及tempdata的方式去操作
因為這部分並不是 .NET Core的新功能這裡就先帶過
詳細的介紹可以看看前幾屆寫的文章

ViewModel

ViewModel 也是在 .NET MVC就有的產物
主要是在解決一個View只能處理一個Model的問題
這邊有一些需要注意及特性:

  • ViewModel 不要有邏輯的部分
  • viewModel使用強型別,而非ViewData和ViewBag是弱型別
  • 當處理大量資料的時候使用ViewModel,少量資料在考慮用ViewData或ViewBag

View component

View component是 .NET core新加入的功能
有別於partial view 單純的把View拆開來
還加入了controller的部分,可以將少部分的邏輯做操作頁面
可以把它想成是partial view + controller的
很類似Vue Component的概念

這裡舉一個簡單的例子
假設今天有一個Movie top 3 的排行榜
需要放在View的某個地方
但他又不是View裡面主要的Model
這時候就可以使用View component去實作

  1. 新增一支View component
    先建立一個叫做ViewComponent的資料夾
    新增一支MoviesTopViewComponet.cs
    並繼承ViewComponent
    在InvokeAsync方法裡面的邏輯很簡單
    在這裡就是new一個MoviceService,去取出已經寫好的Movies list

    \ViewComponents\MoviesTopViewComponent.cs

  2. 新增View component 的View
    View Component有可以重複使用的特性
    因次在這邊將它放入Shared的資料夾下,並建立對應的folder名稱

    \Shared\Components\MoviesTop\Default.cshtml

  3. 在View裡面引進這個Component
    宣告的方式,只要在目標的view裡面 引入@Component找到helper的InvokeAsync,並傳入Component的名稱,使用await是因為是async

    @await Component.InvokeAsync("MoviesTop")
    

  4. 執行結果
    可以看到下方的部分是我們剛剛新增的Component
    並且是可以重複使用的


Action Reuslt & view engine

這個部分預計延續上一篇的生命週期
整理一下到Result過程中發生的事情
後續會再更新


參考資料
https://ithelp.ithome.com.tw/articles/10194523
https://ithelp.ithome.com.tw/articles/10186515
https://kevintsengtw.blogspot.com/2012/12/aspnet-mvc-viewmodel.html
https://www.c-sharpcorner.com/article/viewcomponent-in-asp-net-core/


上一篇
Day 14 Action filter
下一篇
Day 15 MVC Router
系列文
ASP.NET Core 入門實戰30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言